<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<div>
    <button id="button1"> id排序</button>
    <button id="button2"> 登陆名排序</button>
</div>
<table>
    <thead>
    <th>id
    </th>
    <th>loginname
    </th>
    <th>password
    </th>
    <th>name
    </th>
    </thead>
    <tbody id="data">
        <tr th:each="data : ${list}">
         <td th:text="${data.id}"></td>
         <td th:text="${data.loginname}"></td>
         <td th:text="${data.password}"></td>
         <td th:text="${data.name}"></td>
        </tr>
    </tbody>
</table>

</body>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript">
/*<![CDATA[*/
    $(function(){
        $("#button1").click(function(){
            var url ='/sort/userlist?SortCol=id';
            $.get(url, function(data){
                refTableData (data);
            });
        });

        $("#button2").click(function(){
                var url ='/sort/userlist?SortCol=name';
                $.get(url, function(data){
                    refTableData (data);
                });
         });
        function refTableData(data){
            $("#data").empty();
            for(var i =0 ; i<data.length; i++ ){
                $("#data").append('<tr><td >'+data[i].id+'</td><td >'+data[i].loginname+'</td><td ></td><td >'+data[i].name+'</td></tr>');

            }
        }
    });
/*]]>*/
</script>
</html>